<template>
  <Transition name="slide-left">
    <div v-if="showPocketMoney" class="recharge">
      <PageHead
        background="white"
        :border-bottom="false"
        @back="showPocketMoney = false"
      >
        <div class="text-nowrap text-14">零钱明细</div>
      </PageHead>
      <div class="text-center container justify-between flex-col">
        <div>
          <img :src="money" width="48" />
          <div class="mt-24">我的零钱</div>
          <div class="my-12 text-bold text-222 flex align-top justify-center">
            <span class="text-28">￥ </span>
            <span class="text-34">
              {{ store.master.pocketMoney.toFixed(2) }}
            </span>
          </div>
          <div style="color: #f4a046"> 转入零钱通，能赚又能花 </div>
        </div>

        <!-- 充值 -->
        <div>
          <div class="recharge-actions text-center">
            <div class="recharge-button" @click="showRecharge = true">
              充值
            </div>
            <div class="withdraw-button"> 提现 </div>
          </div>

          <div class="text-center help">
            <div class="text-blue text-shadow">常见问题</div>
            <div class="text-999 text-10 mt-4">本服务由财付提供</div>
          </div>
        </div>
      </div>
    </div>
  </Transition>
</template>

<script setup lang="ts">
  import PageHead from '@/views/components/page-head/PageHead.vue';
  import { computed } from 'vue';
  import { getUserStore } from '@/store/user/utils';
  import money from '../../assets/money-fill.png';
  import { showPocketMoney } from './pocket-money';
  import { showRecharge } from '../recharge/recharge';

  const store = computed(() => {
    return getUserStore();
  });
</script>

<style lang="scss" scoped>
  .recharge {
    background-color: white;
    position: fixed;
    width: 100%;
    height: 100vh;
    top: 0;
    z-index: 10;
    .container {
      padding-top: 34px;
      height: calc(100vh - 48px);
      padding-bottom: 12px;
      display: flex;
    }
    %button {
      width: 140px;
      height: 36px;
      line-height: 36px;
      border-radius: 4px;
      margin: auto;
    }
    .recharge-actions {
      margin-top: auto;
      .recharge-button {
        background-color: var(--primary);
        @extend %button;
        color: white;
      }
      .withdraw-button {
        @extend %button;
        background-color: #f1f1f1;
        color: #111;
        margin-top: 16px;
      }
    }
    .help {
      margin-top: 64px;
    }
  }
</style>
